<template>
  <div class="secondsbRight">
    <s-title text="提前办结率排行榜" :btnshow="false" />
    <div id="secondsbRightChart"></div>
  </div>
</template>

<script>
import sTitle from "../../common/sTitle.vue";
import axios from "axios";
export default {
  name: "secondsbRight",
  components: {
    sTitle
  },
  data() {
    return {
      comps: [],
       ls:[
  {
    "px": 2,
    "bmbm": "34132223370000000000",
    "bmmc": "县畜牧水产局",
    "tqbjl": 100,
    "tjbjlzf": null,
    "tjsj": "2021-09-25T20:00:48.000+00:00"
  },
  {
    "px": 1,
    "bmbm": "34132223120000000000",
    "bmmc": "县物价局",
    "tqbjl": 100,
    "tjbjlzf": null,
    "tjsj": "2021-09-25T20:00:48.000+00:00"
  },
  {
    "px": 3,
    "bmbm": "34132223330000000000",
    "bmmc": "县统战部",
    "tqbjl": 98.66,
    "tjbjlzf": null,
    "tjsj": "2021-09-25T20:00:48.000+00:00"
  },
  {
    "px": 4,
    "bmbm": "34132223080000000000",
    "bmmc": "县文化和旅游局",
    "tqbjl": 96.07,
    "tjbjlzf": null,
    "tjsj": "2021-09-25T20:00:48.000+00:00"
  },
  {
    "px": 5,
    "bmbm": "34132223010000000000",
    "bmmc": "县教体局",
    "tqbjl": 94.77,
    "tjbjlzf": null,
    "tjsj": "2021-09-25T20:00:48.000+00:00"
  },
  {
    "px": 6,
    "bmbm": "34132223200000000000",
    "bmmc": "县烟草局",
    "tqbjl": 92.53,
    "tjbjlzf": null,
    "tjsj": "2021-09-25T20:00:48.000+00:00"
  },
  {
    "px": 7,
    "bmbm": "34132280630000000000",
    "bmmc": "县乡村振兴局",
    "tqbjl": 88.74,
    "tjbjlzf": null,
    "tjsj": "2021-09-25T20:00:48.000+00:00"
  },
  {
    "px": 8,
    "bmbm": "34132223312000000000",
    "bmmc": "县医保局",
    "tqbjl": 80.97,
    "tjbjlzf": null,
    "tjsj": "2021-09-25T20:00:48.000+00:00"
  },
  {
    "px": 9,
    "bmbm": "34132223180000000000",
    "bmmc": "县生态环境局",
    "tqbjl": 74.05,
    "tjbjlzf": null,
    "tjsj": "2021-09-25T20:00:48.000+00:00"
  },
  {
    "px": 10,
    "bmbm": "34132223150000000000",
    "bmmc": "县气象局",
    "tqbjl": 71.88,
    "tjbjlzf": null,
    "tjsj": "2021-09-25T20:00:48.000+00:00"
  }
]
    };
  },
  mounted() {
    axios.get(this.$serverIp + "getEarlyfinish").then((res) => {
      debugger
      //res = this.ls;
      var echartData = { datas: [], className: [] };
      for(var i=0;i<res.data.length;i++){
echartData.datas.push(res.data[i].tqbjl);
echartData.className.push(res.data[i].bmmc);
      }
      // var echartData = { xData: [], yData: [] };
      // echartData.yData[0] = [];
      // echartData.yData[1] = [];
      // for (let i = 0; i < res.data.length; i++) {
      //   echartData.xData.push(res.data[i].ny);
      //   echartData.yData[0].push(res.data[i].yps);
      //   echartData.yData[1].push(res.data[i].rps);
      // }
      this.setEchartHandle(echartData);
    });
   // this.setEchartHandle();
  },
  methods: {
   
    setEchartHandle(echartData) {
   var data=echartData.datas;
var className=echartData.className;
var colorList=['#39B3FF','#47E0E0','#7891D9','#83D978','#C7A530','#FF8439','#7FFF00','#E9967A','#FF1493','#ADFF2F'];
var defaultData=[100,100,100,100,100,100,100,100,100,100];






      let _echarts = this.$echarts.init(
        document.getElementById("secondsbRightChart"),
        null,
        { devicePixelRatio: 2 }
      );
      let option = {
    grid: {
        left: '5%',
        right: '5%',
        bottom: '5%',
        top: '10%',
        containLabel: true
    },
    tooltip: {
        trigger: 'axis',
        axisPointer: {
            type: 'none'
        },
        formatter: function(params) {
            return params[0].name + '<br/>' +
                "<span style='display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:rgba(36,207,233,0.9)'></span>" +
                // params[0].seriesName + ' : ' + Number((params[0].value.toFixed(4) / 10000).toFixed(2)).toLocaleString() + ' <br/>'
                params[0].seriesName + ' : ' + params[0].value
        }
    },
    backgroundColor: '',
    xAxis: {
        show: false,
        type: 'value'
    },
    yAxis: [{
        type: 'category',
        inverse: true,
        axisLabel: {
            show: true,
            textStyle: {
                color: '#fff'
            },
        },
        splitLine: {
            show: false
        },
        axisTick: {
            show: false
        },
        axisLine: {
            show: false
        },
        data: className
    }, {
        type: 'category',
        inverse: true,
        axisTick: 'none',
        axisLine: 'none',
        show: true,
        axisLabel: {
            textStyle: {
                color: '#ffffff',
                fontSize: '12'
            },
            formatter: function(value) {
                    return value + ' %';
            },
        },
        data: data
    }],
    series: [{
            name: '完成率',
            type: 'bar',
            zlevel: 1,
            itemStyle: {
                normal: {
                    barBorderRadius: 0,
                    // color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
                    //     offset: 0,
                    //     color: 'rgb(57,89,255,1)'
                    // }, {
                    //     offset: 1,
                    //     color: 'rgb(46,200,207,1)'
                    // }]),
                    color: (params) => {
					return colorList[params.dataIndex]
				}
                },
            },
            barWidth: 10,
            data: data
        },
        {
            name: '背景',
            type: 'bar',
            barWidth: 20,
            barGap: '-100%',
            data: defaultData,
            itemStyle: {
                normal: {
                    color: '#1B375E',
                    barBorderRadius: 0,
                }
            },
        },
    ]
};
      _echarts.setOption(option);
    }
  }
};
</script>
<style scoped>
.secondsbRight {
  margin-top: 20px;
}
#secondsbRightChart {
  width: 100%;
  height: 27vh;
  margin-top: 10px;
}
</style>
 